<template>
  <div class="fullscreen-container">
    <iframe src="/Visualization/store-data/index.html" class="dashboard-iframe"></iframe>
    <el-button type="primary" @click="goBack" class="floating-back-button">
      <el-icon><ArrowLeftBold /></el-icon>
    </el-button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ArrowLeftBold } from '@element-plus/icons-vue';

const router = useRouter();

const goBack = () => {
  router.push('/store-dashboard-hub');
};
</script>

<style scoped>
.fullscreen-container {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

.dashboard-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.floating-back-button {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 999;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  opacity: 0.6;
  transition: opacity 0.3s;
  background-color: rgba(0, 180, 220, 0.15);
  border-color: rgba(0, 180, 220, 0.3);
  color: #e0fbfc;
}

.floating-back-button:hover {
  opacity: 1;
  background-color: rgba(0, 180, 220, 0.25);
  border-color: rgba(0, 180, 220, 0.5);
}
</style> 